<template>
  <view>
    <view class="menu-container">
      <view class="menu-group" v-for="(item, index) in menuList" :key="index">
        <view
          class="menu-item"
          @click="goto"
          :data-url="item.path"
          :data-item="item"
        >
          <view class="left">
            <image class="icon" :src="item.banner"></image>
            <text class="title">{{ item.name }}</text>
          </view>
          <view class="right">
            <image class="arrow" src="/static/img/arrowright.png"></image>
          </view>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="handleNavigate('生活号')" v-if="false">
          <view class="left">
            <image class="icon red" src="../static/img/video.png"></image>
            <text class="title">生活号</text>
          </view>

          <view class="right">
            <text class="desc">{{ getMenuItem("生活号").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('生活号').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('生活号').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('生活号').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('生活号').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>

        <view class="menu-item" @tap="handleNavigate('直播广场')" v-if="false">
          <view class="left">
            <image class="icon orange" src="../static/img/live.png"></image>
            <text class="title">直播广场</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("直播广场").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('直播广场').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('直播广场').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('直播广场').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('直播广场').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>

        <view class="menu-item" @tap="handleNavigate('图文直播')" v-if="false">
          <view class="left">
            <image class="icon orange" src="../static/img/twlive.png"></image>
            <text class="title">图文直播</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("图文直播").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('图文直播').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('图文直播').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('图文直播').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('图文直播').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>

        <view class="menu-item" @tap="handleNavigate('和大检测')" v-if="false">
          <view class="left">
            <image class="icon green" src="../static/img/test.png"></image>
            <text class="title">和大检测</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("和大检测").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('和大检测').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('和大检测').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('和大检测').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('和大检测').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>
      </view>

      <view class="menu-group" v-if="false">
        <view class="menu-item" @tap="handleNavigate('实时销量榜')">
          <view class="left">
            <image class="icon yellow" src="../static/img/rank.png"></image>
            <text class="title">实时销量榜</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("实时销量榜").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('实时销量榜').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('实时销量榜').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('实时销量榜').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('实时销量榜').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @tap="handleNavigate('活动报名')" v-if="false">
          <view class="left">
            <image class="icon blue" src="../static/img/signup.png"></image>
            <text class="title">活动报名</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("活动报名").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('活动报名').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('活动报名').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('活动报名').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('活动报名').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>

        <view class="menu-item" @tap="handleNavigate('权益中心')" v-if="false">
          <view class="left">
            <image class="icon purple" src="../static/img/rights.png"></image>
            <text class="title">权益中心</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("权益中心").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('权益中心').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('权益中心').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('权益中心').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('权益中心').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>
      </view>

      <view class="menu-group" v-if="false">
        <view class="menu-item last" @tap="handleNavigate('AI管家')">
          <view class="left">
            <image class="icon blue" src="../static/img/ai.png"></image>
            <text class="title">AI管家</text>
          </view>
          <view class="right">
            <text class="desc">{{ getMenuItem("AI管家").desc }}</text>

            <view class="tag-wrapper" v-if="getMenuItem('AI管家').tagImage">
              <image
                class="tag-img"
                :src="getMenuItem('AI管家').tagImage"
              ></image>
              <view
                class="red-dot top-right"
                v-show="getMenuItem('AI管家').showDot"
              ></view>
            </view>

            <view
              class="red-dot center"
              v-else-if="getMenuItem('AI管家').showDot"
            ></view>
            <image class="arrow" src="../../static/img/arrowright.png"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- :src="liveinfo.banner"           :style="{ transform: `translate(${x}px, ${y}px)` }"    @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"-->
    <small-window :topPx="topPx" :rightPx="rightPx" :canDocking="false">
      <view class="liveWindows" v-if="showlivewindows">
        <image
          @tap="goToLive"
          class="live-cover"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250508/493bc562a438d311673b0d7c776b5951.jpg"
          mode="aspectFill"
        ></image>

        <image
          @tap="goToLive"
          class="liveicon1"
          :src="pre_url + '/static/images/zb-live.gif'"
        ></image>

        <view class="close">
          <image
            src="/static/img/close2.png"
            style="width: 60%; height: 60%"
            @tap="showlivewindows = false"
          />
        </view>

        <view v-if="0">
          <view class="live-main" @tap="goToLive">
            <view class="live-info">
              <image
                class="live-icon"
                src="@/pagesSocial/static/img/album.png"
                mode="aspectFit"
              ></image>
              <text class="live-title">直播中</text>
            </view>
            <image
              class="liveicon"
              src="/static/img/play.png"
              mode="aspectFit"
            ></image>
            <view class="live-btn">点击查看</view>
          </view>
        </view>
      </view>
    </small-window>
    <dp-tabbar :opt="opt"></dp-tabbar>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      static_url: app.globalData.static_url,
      pre_url: app.globalData.pre_url,
      opt: {},
      menuList: [],
      showlivewindows: false,
      liveinfo: {},
      rightPx: -1000,
      topPx: 180,
      x: 0, // 水平位置
      y: 0, // 垂直位置
      startX: 0, // 触摸起始X
      startY: 0, // 触摸起始Y
      elementX: 0, // 元素初始X
      elementY: 0, // 元素初始Y
    };
  },
  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.getdata();
    var mid = uni.getStorageSync("mid");
    if (mid) {
      this.getlive();
    }
  },

  onPullDownRefresh: function () {
    var mid = uni.getStorageSync("mid");
    if (mid) {
      this.getlive();
    }
  },

  methods: {
    getdata() {
      var that = this;
      app.get(
        "index/getEntranceSet",
        {
          type: 2,
        },
        function (res) {
          if (res.status == 1) {
            if (res.data.length > 0) {
              that.menuList = res.data;
              that.$nextTick(() => {
                that.getliveWindowLocation();
              });
            } else {
              app.error("暂无数据");
            }
          } else {
            app.error(res.msg);
          }
        }
      );
    },

    getlive() {
      let that = this;
      app.get(
        "LiveChannel/channelList",
        {
          type: 1,
          page: 1,
          limit: 10,
        },
        (res) => {
          if (res.status == 200) {
            if (res.data.length > 0) {
              that.liveinfo = res.data[0];
              if (that.liveinfo.show_status == 1) {
                that.showlivewindows = true;
                setTimeout(() => {
                  uni.$emit("resetSmaillWindow");
                }, 500);
              }
            }
          }
        }
      );
    },

    getliveWindowLocation() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".menu-item")
        .boundingClientRect((res) => {
          if (res.height) {
            this.topPx = res.height + 10;
            this.rightPx = 15;
          }
        })
        .exec();
    },

    goto(e) {
      const url = e.currentTarget.dataset.url;
      const item = this.menuList.find((menu) => menu.path === url);

      if (item.path_type === 2) {
        // 视频号跳转逻辑
        this.jumpToVideoChannel(item.path_args);
      } else {
        // 普通页面跳转
        uni.navigateTo({
          url: url,
        });
      }
    },

    // 跳转到视频号
    jumpToVideoChannel(pathArgs) {
      // #ifdef MP-WEIXIN
      const finderUserName = pathArgs.find(
        (arg) => arg.field === "finderUserName"
      )?.value;
      const feedId = pathArgs.find((arg) => arg.field === "feedId")?.value;

      if (!finderUserName) {
        uni.showToast({
          title: "视频号信息错误",
          icon: "none",
        });
        return;
      }
      //wx.openChannelsActivity 单个视频
      wx.openChannelsUserProfile({
        finderUserName: finderUserName,
        feedId: feedId,
        success(res) {
          console.log("跳转成功", res);
        },
        fail(err) {
          console.error("跳转失败", err);
        },
      });
      // #endif

      // #ifndef MP-WEIXIN
      uni.showToast({
        title: "请在微信小程序中打开",
        icon: "none",
      });
      // #endif
    },

    //更新数据
    getData() {
      console.log("test");
      this.getMenuItem("和大相册").desc = new Date().toLocaleString();
      this.loaded();
    },

    // 导航到指定页面
    handleNavigate(title) {
      let tourl = "";
      switch (title) {
        case "和大相册":
          tourl = "/pagesSocial/album/album";
          break;
        case "生活号":
          tourl = "/pagesSocial/life/life";
          break;
        case "直播广场":
          tourl = "/pagesSocial/livesQuare/livesQuare";
          break;
        case "图文直播":
          tourl = "/pagesSocial/liveTuwen/liveTuwen";
          break;
        case "和大检测":
          tourl = "/pagesSocial/detection/detection";
          break;
        case "实时销量榜":
          tourl = "/pagesSocial/sales/index";
          break;
        case "活动报名":
          tourl = "/pagesSocial/activity/activity";
          break;
        case "权益中心":
          tourl = "/pagesSocial/rights/rights";
          break;
        case "AI管家":
          tourl = "/pagesSocial/ai/chat";
          break;
        default:
          tourl = "";
          break;
      }

      if (tourl) {
        app.goto(tourl);
      } else {
        app.error("暂未开放");
      }
    },

    //获取菜单选项
    getMenuItem(title) {
      const menu = this.menuList.find((item) => item.title === title);
      return menu ? menu : "";
    },

    goToLive() {
      //   app.goto(
      //     "/pages/index/webView?url=" +
      //       encodeURIComponent(this.liveinfo.watch_url)
      //   );
      app.goto("/pagesSocial/livesQuare/lives");
    },

    //触摸开始
    handleTouchStart(e) {
      const touch = e.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;
      this.elementX = this.x;
      this.elementY = this.y;

      // H5 专用：禁止页面滚动
      if (typeof document !== "undefined") {
        document.body.style.overflow = "hidden";
      }
    },

    // 触摸移动
    handleTouchMove(e) {
      //   e.preventDefault(); // 阻止默认滚动行为
      // H5 专用：阻止默认行为
      if (typeof document !== "undefined") {
        e.preventDefault();
      }

      const touch = e.touches[0];
      const deltaX = touch.clientX - this.startX;
      const deltaY = touch.clientY - this.startY;

      // 更新位置
      this.x = this.elementX + deltaX;
      this.y = this.elementY + deltaY;
    },

    // 触摸结束
    handleTouchEnd() {
      // H5 专用：恢复页面滚动
      if (typeof document !== "undefined") {
        document.body.style.overflow = "";
      }
      // 可在此添加边界检测或回调逻辑
      console.log("最终位置:", this.x, this.y);
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-container {
  background: #f8f8f8;
  // min-height: 100vh;
  padding-top: 20rpx;

  .menu-group {
    margin-bottom: 20rpx;
    background: #fff;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 30rpx;
      background: #fff;
      border-bottom: 1rpx solid #f5f5f5;

      &.last {
        border-bottom: none;
      }

      .left {
        display: flex;
        align-items: center;

        .icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 20rpx;
          padding: 10rpx;
          border-radius: 8rpx;

          &.green {
            background: #e8f5e9;
          }

          &.red {
            background: #ffebee;
          }

          &.orange {
            background: #fff3e0;
          }

          &.yellow {
            background: #fffde7;
          }

          &.blue {
            background: #e3f2fd;
          }

          &.purple {
            background: #f3e5f5;
          }
        }

        .title {
          font-size: 30rpx;
          color: #333;
          font-weight: 500;
        }
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .desc {
          font-size: 26rpx;
          color: #999;
          margin-right: 16rpx;
          max-width: 400rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .tag-wrapper {
          position: relative;
          margin-right: 16rpx;

          .tag-img {
            width: 48rpx;
            height: 48rpx;
            border-radius: 10%;
            background-color: gray;
          }

          .red-dot {
            position: absolute;
            top: -6rpx;
            right: -6rpx;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #ff4d4f;
          }
        }

        .red-dot.center {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background: #ff4d4f;
          margin-right: 16rpx;
        }

        .arrow {
          width: 32rpx;
          height: 32rpx;
          // opacity: 0.3;
        }
      }
    }
  }
}

.liveWindows {
  // position: fixed;
  // top: 160rpx;
  // right: 20rpx;
  width: 160rpx;
  height: 235rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
  border: 1rpx solid rgba(187, 187, 187, 1);
  // z-index: 999;
  display: flex;
  align-items: center;
  padding: 10rpx;
  overflow: hidden;
  position: relative;

  .live-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .liveicon1 {
    z-index: 9;
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(118, 94, 167, 1),
      rgba(128, 30, 124, 1)
    );

    image {
      width: 120%;
      height: 120%;
      border-radius: 50%;
    }
  }

  .close {
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    width: 40rpx;
    height: 40rpx;
    // background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .live-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 35rpx;
    margin-top: 60rpx;

    .live-info {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      margin: 0 auto;
      .live-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      .live-title {
        color: #fff;
        font-size: 24rpx;
      }
    }

    .liveicon {
      width: 60rpx;
      height: 60rpx;
    }

    .live-btn {
      // position: absolute;
      bottom: 10rpx;
      background: #ff4d4f;
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      z-index: 1;
    }
  }
}
</style>
